<template>
  <div id="app">
    <!-- <router-link to="/home" tag="button" replace active-class="active"
      >首页</router-link
    >
    <router-link to="/about" tag="button" replace active-class="active"
      >关于</router-link
    > -->
    <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link>
    <!-- <router-link :to="'/user/' + Id" tag="button" replace>用户</router-link> -->
    <!-- <router-link to="/profile" tag="button">档案</router-link> -->
    <!-- <router-link :to="{ path: '/profile', query: { name: 'xiaoLam', age: 18, height: 1.7, }}" tag="button">档案</router-link> -->

    <!-- 通过代码来实现路由跳转的同时传递数据 -->
    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>

    <!-- 通过代码来实现路由跳转 -->
    <!-- <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button> -->

    <!-- 直接使用router-view 会将切换的组件频繁地创建和销毁 -->
    <!-- <router-view></router-view> -->
    <!-- 使用 keep-alive 标签将router-view标签 包起来 就可以让组件不被销毁 也就是保留组件状态 -->
    <!-- 如果某些组件就是需要频繁的销毁和创建, 那么就用到了keep-alive中的exclude属性了 -->
    <keep-alive exclude="Profile,User">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      Id: "lisi",
    };
  },
  methods: {
    homeClick() {
      // 这个$router 时vue-router 模块绑定到所有的组件构造器中的
      // this.$router.push("/home");
      // 如果想要做到禁用后退键的效果, 可以使用replace方法
      this.$router.replace("/home");
    },
    aboutClick() {
      // this.$router.push("/about");
      this.$router.replace("/about");
    },
    userClick() {
      this.$router.push("/user/" + this.Id);
    },
    profileClick() {
      this.$router.push({
        path: "/profile",
        query: {
          name: "xiaoLam",
          age: 18,
          height: 1.7,
        },
      });
    },
  },
};
</script>

<style>
/* .router-link-active {
  color: orange;
} */

.active {
  color: orange;
}
</style>